<template>
<div class="wrapper">
    <div class="container-fluid">
        <div class="page-title-box">
            <div class="btn-group ">
                <ol class="breadcrumb hide-mobile p-0 m-0">
                    <li class="breadcrumb-item">
                        <router-link to="/">{{$t('breadcrumb.index')}}</router-link>
                    </li>
                    <li class="breadcrumb-item active">{{$t('breadcrumb.profile')}}</li>
                </ol>
            </div>
        </div>
        <div class="row justify-content-center">
            <div id="main" class="card-box col-10 grsztd">
                <div class="row justify-content-md-center my-3">
                    <div class="col-10">
                        <h3>{{$t('breadcrumb.profile')}}</h3>
                        <p class="font-weight-bold">{{$t('label.nickname.my')}}{{user.user_login}}</p>
                    </div>
                </div>
                <div class="row justify-content-md-center my-3">
                    <div class="col-10">
                        <span class="font-weight-bold">{{$t('label.avatar')}}</span>
                        <p class="d-flex">
                            <small>{{$t('msg.avatar')}}</small>
                            <button type="button" class="btn btn-link ml-auto" @click="avatarModal()">{{$t('btn.avatar')}}</button>
                        </p>
                    </div>
                </div>
                <div class="row justify-content-md-center my-3">
                    <div class="col-10">
                        <span class="font-weight-bold">{{$t('label.password.login')}}</span>
                        <p class="d-flex">
                            <small>{{$t('msg.password.login')}}</small>
                            <button type="button" class="btn btn-link ml-auto" @click="pwdModal()">{{$t('btn.password.login')}}</button>
                        </p>
                    </div>
                </div>
                <div class="row justify-content-md-center my-3">
                    <div class="col-10">
                        <span class="font-weight-bold">{{$t('label.password.payment')}}</span>
                        <p class="d-flex">
                            <small>{{$t('msg.password.login')}}</small>
                            <button type="button" class="btn btn-link ml-auto" @click="pwd2Modal()">{{$t('btn.password.login')}}</button>
                        </p>
                    </div>
                </div>
                <div class="row justify-content-md-center my-3">
                    <div class="col-10">
                        <span class="font-weight-bold">{{$t('label.phone.bind')}}{{maskMobile}}</span>
                        <p class="d-flex">
                            <small>{{$t('msg.phone.bind')}}</small>
                            <button type="button" class="btn btn-link ml-auto" @click="mobileModal()">{{$t('btn.phone.bind')}}</button>
                        </p>
                    </div>
                </div>
                <div class="row justify-content-md-center my-3">
                    <div class="col-10">
                        <span class="font-weight-bold">{{$t('label.idcard')}}</span>
                        <p class="d-flex">
                            <small>{{$t('msg.idcard')}}</small>
                            <button type="button" class="btn btn-link ml-auto" @click="idcardModal()">{{$t('btn.idcard')}}</button>
                        </p>
                    </div>
                </div>
                <div v-if="$store.state.user && $store.state.user.user_type !== '1'"
                     class="row justify-content-md-center my-3">
                    <div class="col-10">
                        <span class="font-weight-bold">{{$t('label.bankcard')}}</span>
                        <p class="d-flex">
                            <small>{{$t('msg.bankcard')}}</small>
                            <button type="button" class="btn btn-link ml-auto" @click="bankModal()">{{$t('btn.bankcard')}}</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--modal-->
    <div id="avatar-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="avatar-modal"
         data-backdrop="static" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <h2 class="text-uppercase text-center m-b-30">{{$t('msg.edit.avatar')}}</h2>
                    <form class="form-horizontal" data-parsley-excluded="">
                        <input class="form-control" type="hidden" name="avatar" v-model="form.avatar.avatar"
                               data-parsley-required="true" :data-parsley-required-message="$t('msg.required.file.error')"
                               data-parsley-errors-container="#parsley-container-avatar">

                        <div class="fileupload fileupload-new row" data-provides="fileupload">
                            <div class="col-6">
                                <div class="fileupload-preview thumbnail avatar">
                                    <img :src="user.avatarsrc" alt="avatar">
                                </div>
                                <p id="parsley-container-avatar"></p>
                            </div>
                            <div class="col-6 align-self-center">
                                <button type="button" class="btn btn-gradient btn-file">
                                    <span><i class="fa fa-paper-clip"></i> {{$t('btn.file.image')}}</span>
                                    <input data-file="avatar" type="file" accept=".jpg,.png"
                                           @change="triggerFile($event)" />
                                </button>
                                <ul class="mt-3 list-unstyled">
                                    <li>{{$t('msg.file.accept')}}</li>
                                    <li>{{$t('msg.file.max',['1M'])}}</li>
                                </ul>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-light" data-dismiss="modal">{{$t('btn.cancel')}}</button>
                            <button type="button" class="btn btn-gradient ml-3" @click="avatar($event)">{{$t('btn.ok')}}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="pwd-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="pwd-modal"
         data-backdrop="static" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <h2 class="text-uppercase text-center m-b-30">{{$t('msg.edit.password')}}</h2>
                    <form class="form-horizontal">
                        <div class="form-group row">
                            <div class="col-sm-6 offset-sm-3">
                                <label for="user_pass">{{$t('label.password.old')}}</label>
                                <input id="user_pass" class="form-control" type="password" name="user_pass"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-6 offset-sm-3">
                                <label for="newpassword">{{$t('label.password.new')}}</label>
                                <input id="newpassword" class="form-control" type="password" name="newpassword"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')"
                                       data-parsley-pattern="/^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{6,18}$/"
                                       :data-parsley-pattern-message="$t('placeholder.password.pattern',[6,18])">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-6 offset-sm-3">
                                <label for="cpassword">{{$t('label.password.confirm')}}</label>
                                <input id="cpassword" class="form-control" type="password"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')"
                                       data-parsley-equalto="#newpassword" :data-parsley-equalto-message="$t('msg.password.confirm.fail')">
                            </div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-light" data-dismiss="modal">{{$t('btn.cancel')}}</button>
                            <button type="button" class="btn btn-gradient ml-3" @click="pwd($event)">{{$t('btn.ok')}}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="pwd2-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="pwd2-modal"
         data-backdrop="static" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <h2 class="text-uppercase text-center m-b-30">{{$t('msg.edit.password')}}</h2>
                    <form class="form-horizontal">
                        <div class="form-group row">
                            <div class="col-7 col-sm-5 offset-sm-2">
                                <label for="captcha2">{{$t('label.captcha')}}</label>
                                <input id="captcha2" class="form-control col-8" type="text" name="mobile_code"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')"
                                       data-parsley-pattern="^[0-9]{6}$" :data-parsley-pattern-message="$t('msg.captcha.error')"
                                       :placeholder="$t('placeholder.captcha')">
                            </div>
                            <div class="col-5 col-sm-3">
                                <label for="captcha">&nbsp;</label>
                                <CountDownBtn class="btn-block"
                                              :seconds="seconds2"
                                              :text="$t('btn.resend')"
                                              @click.native="captcha2">
                                    {{$t('btn.captcha')}}
                                </CountDownBtn>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-8 offset-sm-2">
                                <label for="newpassword2">{{$t('label.password.new')}}</label>
                                <input id="newpassword2" class="form-control" type="password" name="newreadpassword"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')"
                                       data-parsley-pattern="/^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{6,18}$/"
                                       :data-parsley-pattern-message="$t('placeholder.password.pattern',[6,18])">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-8 offset-sm-2">
                                <label for="cpassword2">{{$t('label.password.confirm')}}</label>
                                <input id="cpassword2" class="form-control" type="password"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')"
                                       data-parsley-equalto="#newpassword2" :data-parsley-equalto-message="$t('msg.password.confirm.fail')">
                            </div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-light" data-dismiss="modal">{{$t('btn.cancel')}}</button>
                            <button type="button" class="btn btn-gradient ml-3" @click="pwd2($event)">{{$t('btn.ok')}}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="mobile-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mobile-modal"
         data-backdrop="static" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content bdsja">
                <div class="modal-body">
                    <h2 class="text-uppercase text-center m-b-30">{{$t('msg.edit.phone')}}</h2>
                    <form class="form-horizontal">
                        <div class="form-group row">
                            <div class="col-sm-8 offset-sm-2">
                                <label for="password">{{$t('label.password')}}</label>
                                <input id="password" class="form-control" type="password" name="user_pass"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-8 offset-sm-2">
                                <label for="phone">{{$t('label.phone.new')}}</label>
                                <vue-country-intl type="phone"
                                                  v-model="countryCode"
                                                  :onlyCountry="onlyCountry"
                                                  selectedText=""></vue-country-intl>
                                <input id="phone" class="form-control" style="margin-top: 1rem" type="text" name="mobile" v-model="form.mobile"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')"
                                       data-parsley-group="captcha"
                                       :placeholder="'+'+countryCode">
                                <input type="hidden" name="phonecode" :value="countryCode">
                            </div>
                        </div>
                        <div class="form-group row yzmmobile">
                            <div class="col-7 col-sm-5 offset-sm-2">
                                <label for="captcha">{{$t('label.captcha')}}</label>
                                <input id="captcha" class="form-control col-8" type="text" name="mobile_code"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')"
                                       data-parsley-pattern="^[0-9]{6}$" :data-parsley-pattern-message="$t('msg.captcha.error')"
                                       :placeholder="$t('placeholder.captcha')">
                            </div>
                            <div class="col-5 col-sm-3">
                                <label for="captcha">&nbsp;</label>
                                <CountDownBtn class="btn-block"
                                              :seconds="seconds"
                                              :text="$t('btn.resend')"
                                              @click.native="captcha">
                                    {{$t('btn.captcha')}}
                                </CountDownBtn>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end bdsjbtn">
                            <button type="button" class="btn btn-light" data-dismiss="modal">{{$t('btn.cancel')}}</button>
                            <button type="button" class="btn btn-gradient ml-3" @click="mobile($event)">{{$t('btn.ok')}}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="idcard-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="idcard-modal"
         data-backdrop="static" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <h2 class="text-uppercase text-center m-b-30">{{$t('msg.edit.idcard')}}</h2>
                    <form class="form-horizontal" data-parsley-excluded="">
                        <input class="form-control" type="hidden" name="idcard" v-model="form.idcard.idcard"
                               data-parsley-required="true" :data-parsley-required-message="$t('msg.required.file.error')"
                               data-parsley-errors-container="#parsley-container-idcard">
                        <input class="form-control" type="hidden" name="idsidecard" v-model="form.idcard.idsidecard"
                               data-parsley-required="true" :data-parsley-required-message="$t('msg.required.file.error')"
                               data-parsley-errors-container="#parsley-container-idsidecard">

                        <div class="form-group row">
                            <div class="col-sm-6">
                                <label for="idname" class="w-2">{{$t('label.name')}}</label>
                                <input id="idname" class="form-control" type="text" name="idname"
                                       v-model="form.idcard.idname"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')">
                            </div>
                            <div class="col-sm-6">
                                <label for="idnum" class="w-2">{{$t('label.idcard.number')}}</label>
                                <input id="idnum" class="form-control" type="text" name="idnum"
                                       v-model="form.idcard.idnum"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-6" style="margin-bottom: 36px">
                                <label class="w-2">{{$t('label.idcard.photo1')}}</label>
                                <div class="fileupload fileupload-new b_flex" data-provides="fileupload">
                                    <div class="fileupload-preview thumbnail px-5">
                                        <img class="img-thumbnail"
                                             :src="form.idcard.idcardsrc?form.idcard.idcardsrc:'/assets/images/id-card.png'"
                                             :alt="$t('label.idcard.photo1')">
                                    </div>
                                    <p id="parsley-container-idcard"></p>
                                    <div class="align-self-center" style="position: absolute; bottom: -36px;">
                                        <button type="button" class="btn btn-gradient btn-file">
                                            <span><i class="fa fa-paper-clip"></i> {{$t('btn.file.image')}}</span>
                                            <input data-file="idcard" type="file" accept=".jpg,.png"
                                                   @change="triggerFile($event)" />
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6" style="margin-bottom: 36px">
                                <label class="w-2">{{$t('label.idcard.photo2')}}</label>
                                <div class="fileupload fileupload-new b_flex" data-provides="fileupload">
                                    <div class="fileupload-preview thumbnail px-5">
                                        <img class="img-thumbnail" width="100%"
                                             :src="form.idcard.idsidecardsrc?form.idcard.idsidecardsrc:'/assets/images/id-card.png'"
                                             :alt="$t('label.idcard.photo2')">
                                    </div>
                                    <p id="parsley-container-idsidecard"></p>
                                    <div class="align-self-center" style="position: absolute; bottom: -36px;">
                                        <button type="button" class="btn btn-gradient btn-file">
                                            <span><i class="fa fa-paper-clip"></i> {{$t('btn.file.image')}}</span>
                                            <input data-file="idsidecard" type="file" accept=".jpg,.png"
                                                   @change="triggerFile($event)" />
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <ul class="mt-3 list-unstyled">
                                    <li>{{$t('msg.file.accept')}}</li>
                                    <li>{{$t('msg.file.max',['1M'])}}</li>
                                </ul>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end bdsjbtn">
                            <button type="button" class="btn btn-light" data-dismiss="modal">{{$t('btn.cancel')}}</button>
                            <button type="button" class="btn btn-gradient ml-3"
                                    @click="idcard($event)">{{$t('btn.ok')}}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="bank-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="bank-modal"
         data-backdrop="static" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <h2 class="text-uppercase text-center m-b-30">{{$t('msg.edit.bankcard')}}</h2>
                    <form class="form-horizontal" data-parsley-excluded="">
                        <input class="form-control" type="hidden" name="bankcard" v-model="form.bank.bankcard"
                               data-parsley-required="true" :data-parsley-required-message="$t('msg.required.file.error')"
                               data-parsley-errors-container="#parsley-container-bankcard">

                        <div class="form-group row">
                            <div class="col-sm-6">
                                <label for="accountname" class="w-3">{{$t('label.name')}}</label>
                                <input id="accountname" class="form-control" type="text" name="accountname"
                                       v-model="form.bank.accountname"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')">
                            </div>
                            <div class="col-sm-6">
                                <label for="accountnum" class="w-3">{{$t('label.bankcard.number')}}</label>
                                <input id="accountnum" class="form-control" type="text" name="accountnum"
                                       v-model="form.bank.accountnum"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-6">
                                <label for="bankname" class="w-3">{{$t('label.bankcard.name')}}</label>
                                <input id="bankname" class="form-control" type="text" name="bankname"
                                       v-model="form.bank.bankname"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')">
                            </div>
                            <div class="col-sm-6">
                                <label for="bankbranch" class="w-3">{{$t('label.bankcard.branch')}}</label>
                                <input id="bankbranch" class="form-control" type="text" name="bankbranch"
                                       v-model="form.bank.bankbranch"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-6">
                                <label class="w-3">{{$t('label.bankcard.photo')}}</label>
                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                    <div class="fileupload-preview thumbnail px-5">
                                        <img class="img-thumbnail" width="100%"
                                             :src="form.bank.bankcardsrc?form.bank.bankcardsrc:'/assets/images/credit-card.png'"
                                             alt="银行卡照片">
                                    </div>
                                    <p id="parsley-container-bankcard"></p>
                                    <div v-if="form.bank.status!=='0'" class="align-self-center">
                                        <button type="button" class="btn btn-gradient btn-file">
                                            <span><i class="fa fa-paper-clip"></i> {{$t('btn.file.image')}}</span>
                                            <input data-file="bankcard" type="file" accept=".jpg,.png"
                                                   @change="triggerFile($event)" />
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <ul class="mt-3 list-unstyled">
                                    <li>{{$t('msg.file.accept')}}</li>
                                    <li>{{$t('msg.file.max',['1M'])}}</li>
                                </ul>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end bdsjbtn ">
                            <button type="button" class="btn btn-light" data-dismiss="modal">{{$t('btn.cancel')}}</button>
                            <button type="button" class="btn btn-gradient ml-3"
                                    @click="bank($event)" :disabled="form.bank.status==='0'">{{$t('btn.ok')}}
                            </button>
                        </div>
                        <div v-if="form.bank.status==='0'"
                             class="d-flex justify-content-center text-danger">
                            {{$t('msg.bankcard.warn')}}
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import CountDownBtn from '@/components/CountDownBtn.vue'

export default {
    name: "userSettings",
    components: {
        CountDownBtn
    },
    data() {
        return {
            maskMobile: '',
            maskAccount: '',
            user: this.$store.state.user,
            form: {
                avatar: {},
                mobile: '',
                idcard: {},
                bank: {}
            },
            file: {},
            seconds: 0,
            seconds2: 0,
            countryCode: '86',
            onlyCountry: this.onlyCountry,
            t: {
                "ok": this.$t('btn.ok'),
                "msg_suc": this.$t('msg.ajax.success'),
                "msg_err": this.$t('msg.ajax.fail'),
                "captcha": this.$t('msg.captcha.send.fail'),
                "upload": this.$t('msg.file.upload.fail'),
                "max": this.$t('msg.file.max', ['1M'])
            }
        }
    },
    created() {
        const vm = this;
        const api = vm.api;
        const http = vm.$http;
        http.get(api + 'UserInfo/getmobilebank')
            .then(function (response) {
                const data = response.data;
                if ('0' === data.code) {
                    vm.maskMobile = data.data.mobile;
                    vm.maskAccount = data.data.accountnum;
                }
            })
            .catch(function (error) {
                console.log(error)
            });
    },
    methods: {
        avatarModal() {
            $('#avatar-modal').modal('toggle');
        },
        async avatar(event) {
            let avatar = this.file.avatar;
            if (avatar) {
                let obj = await this.upload(avatar);
                this.$set(this.form.avatar, 'avatar', obj);
            }
            this.$nextTick(() => this.post(event, '', 'UserInfo/uploadavatar'))
        },
        pwdModal() {
            $('#pwd-modal').modal('toggle');
        },
        pwd2Modal() {
            $('#pwd2-modal').modal('toggle');
        },
        pwd: function (event) {
            this.post(event, '', 'UserLogin/changepass');
        },
        pwd2: function (event) {
            this.post(event, '', 'UserLogin/changereadpass');
        },
        mobileModal() {
            $('#mobile-modal').modal('toggle');
        },
        mobile: function (event) {
            this.post(event, '', 'UserLogin/changemobile');
        },
        bankModal() {
            $('#bank-modal').modal('toggle');
            const vm = this;
            const api = vm.api;
            const http = vm.$http;

            http.get(api + 'Bank/editbank').then(function (response) {
                const data = response.data;
                if ('0' === data.code) {
                    vm.form.bank = data.data;
                }
            }).catch(function (error) {
                console.log(error)
            });
        },
        async bank(event) {
            let bankcard = this.file.bankcard;
            if (bankcard) {
                let obj = await this.upload(bankcard);
                this.$set(this.form.bank, 'bankcard', obj);
            }
            this.$nextTick(() => this.post(event, '', 'Bank/addbank'));
        },
        idcardModal() {
            $('#idcard-modal').modal('toggle');
            const vm = this;
            const api = vm.api;
            const http = vm.$http;

            http.get(api + 'Bank/editidcard').then(function (response) {
                const data = response.data;
                if ('0' === data.code) {
                    vm.form.idcard = data.data;
                }
            }).catch(function (error) {
                console.log(error)
            });
        },
        async idcard(event) {
            let idcard = this.file.idcard;
            if (idcard) {
                let obj = await this.upload(idcard);
                this.$set(this.form.idcard, 'idcard', obj);
            }
            let idsidecard = this.file.idsidecard;
            if (idsidecard) {
                let obj = await this.upload(idsidecard);
                this.$set(this.form.idcard, 'idsidecard', obj);
            }
            this.$nextTick(() => this.post(event, '', 'Bank/addidcard'));
        },
        triggerFile(event) {
            const vm = this;
            let el = event.target;
            let max = +el.dataset.max;
            if (max && !isNaN(max)) {
                max = max * 1024;
            } else {
                max = 1048576;
            }
            if (el.files[0].size > max) {
                swal({
                    title: vm.t.max,
                    button: {
                        text: vm.t.ok,
                        className: 'btn btn-gradient',
                    }
                })
                return
            }
            this.file[el.dataset.file] = el.files[0];
        },
        async upload(file) {
            const vm = this;
            const api = vm.api;
            const http = vm.$http;

            const config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            };
            let params = new FormData();
            params.append('file', file);
            try {
                let response = await http.post(api + 'Upload/upload', params, config);
                const data = response.data;
                if ('0' === data.code) {
                    return data.data.id;
                } else {
                    swal({
                        title: vm.t.upload,
                        text: data.msg,
                        icon: 'info',
                        button: {
                            text: vm.t.ok,
                            className: 'btn btn-gradient',
                        }
                    })
                }
            } catch (error) {
                console.log(error)
            }
        },
        captcha2() {
            const vm = this;
            const api = vm.api;
            const http = vm.$http;
            vm.seconds2 = 90;

            http.get(api + 'GetMessage/forgetreadpass').then(function (response) {
                const data = response.data;
                if ('0' !== data.code) {
                    swal({
                        title: vm.t.captcha,
                        text: data.msg,
                        icon: 'info',
                        button: {
                            text: vm.t.ok,
                            className: 'btn btn-gradient',
                        }
                    })
                }
            }).catch(function (error) {
                console.log(error);
            });
        },
        captcha(event) {
            const vm = this;
            let $form = $(event.target).closest('form');
            if ($form.parsley().validate({group: 'captcha'})) {
                const api = vm.api;
                const http = vm.$http;
                vm.seconds = 90;

                http.get(api + 'GetMessage/register', {
                    params: {
                        mobile: this.form.mobile,
                        phonecode: this.countryCode
                    }
                }).then(function (response) {
                    const data = response.data;
                    if ('0' !== data.code) {
                        swal({
                            title: vm.t.captcha,
                            text: data.msg,
                            icon: 'info',
                            button: {
                                text: vm.t.ok,
                                className: 'btn btn-gradient',
                            }
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            }
        },
        post(event, swalTitle, url) {
            const vm = this;
            const api = vm.api;
            const http = vm.$http;
            const $form = $(event.target).closest('form');
            if (!$form.parsley().validate()) return;

            http.post(api + url, $form.serialize())
                .then(function (response) {
                    const data = response.data;
                    if ('0' === data.code) {
                        swal({
                            title: swalTitle + vm.t.msg_suc,
                            icon: 'success',
                            button: {
                                text: vm.t.ok,
                                className: 'btn btn-gradient',
                            }
                        }).then(() => event.target.previousElementSibling.click())
                    } else {
                        swal({
                            title: swalTitle + vm.t.msg_err,
                            text: data.msg,
                            icon: 'info',
                            button: {
                                text: vm.t.ok,
                                className: 'btn btn-gradient',
                            }
                        })
                    }
                }).catch((error) => console.log(error));
        }
    }
}
</script>
